<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/lib/template-web.js"></script>
<script src="/layui/layui.js"></script>
<script src="/lib/jquery.js"></script>
<script src="/js/dishes.js"></script>
<link rel="stylesheet" href="/lib/cropper/cropper.css">
<script src="/lib/cropper/Cropper.js"></script>
<script src="/lib/cropper/jquery-cropper.js"></script>
<link rel="stylesheet" href="/css/dishes.css">
<script src="/js/update.js"></script>

<body>

    <div class="container">
        <form class="layui-form " id="form-add" action="">
            <div class="layui-form-item" style=" position: relative;">
                <label class="layui-form-label categoryName"><span class="red">*</span>菜品名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" required lay-verify="required" placeholder="请填写菜品名称" autocomplete="off" class="layui-input catename">
                </div>

                <label class="layui-form-label categoryName"><span class="red">*</span>菜品分类</label>
                <div class="layui-input-block width">
                    <select name="cate_id" lay-filter="categoryId" id="main-manager-sfxId">

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label categoryName"><span class="red">*</span>菜品价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" id="price" required placeholder="请填写菜品价格" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="position:relative ;">

                <div class="flavorBox">
                    <label class="flavor-left" style="margin-left: 22px; width: 180px;">口味配置做法</label>
                    <!-- <button style="margin-left: -10px;" type="button" class="layui-btn layui-btn-warm" id="flavor-btn">+
                        添加口味</button> -->
                    <!-- 口味下拉菜单 -->
                    <div class="dis_flavor ">
                        <!-- 标题 -->
                        <div class="title">口味名（3个字内）口味标签（输入标签回车添加）</div>
                        <!-- 选择框 -->
                        <div class="new">
                            <div class="count">
                                <!-- 下拉弹框 -->
                                <div class="layui-inline" style="width: 150px;">
                                    <input name="" placeholder="请输入口味" class="layui-input" id="demo2" autocomplete="off">
                                </div>
                                <div class=" my-right"></div>
                                <a href="javascript:;" class="flavorDel red">删除</a>
                            </div>
                        </div>
                        <!-- 添加口味 -->
                        <button type="button" class="layui-btn layui-btn-warm my-btn" data-index='1'>添加口味</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item cateImg">
                <!-- 左侧的 label -->
                <label class="layui-form-label " style="width: 180px; "><span style="color: red;">*</span>菜品图片:</label>
                <!-- 选择封面区域 -->
                <div class="layui-input-block cover-box">
                    <!-- 左侧裁剪区域 -->
                    <div class="cover-left">
                        <span id="btnChooseImage">
                            <a href="javascript:;" style="line-height: 160px;">上传图片</a>
                        </span>
                        <img id="image" src="" alt="" style="position:relative;top:-160px;" />
                    </div>
                </div>
                <input type="file" id="coverFile" style="display: none;" accept="image/png,image/jpeg,image/gif" />
            </div>
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label categorName">菜品描述：</label>
                <div class="layui-input-block mt">
                    <textarea name="desc" placeholder="菜品描述,最高输入200字" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="position:relative;">
                    <div class="btns">
                        <a class="layui-btn btnReset">取消</a>
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="formDemo">保存</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <script>
        //顶部返回
        // $('.return').click(function() {
        //         location.href = '/index.html#/dishes'
        //         window.location.reload();
        //     })
        // 上传图片

        //渲染下拉框
    </script>
    <script type="text/html" id="tpl-cate">
        {{each data}}
        <option value="{{$value.id}}" id="{{$value.id}}">{{$value.name}}</option>
        {{/each }}
    </script>
    <script type="text/html" id="xrym">
        {{each records}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>x</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym1">
        {{each wendu}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym2">
        {{each jikou}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym3">
        {{each ladu}}
        <div class="cates">
            <span class="item">{{$value.name}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="xrym4">
        {{each flavors}}
        <div class="cates niuma">
            <span class="item">{{$value.value}}<i>X</i></span>
        </div>
        {{/each}}
    </script>
</body>

</html>